<template>
  <MyVanskeleton :loading="skeletonLoading">
    <template v-slot:my-content>
      <div class="company-style">
        <!-- 导航栏 start -->
        <van-nav-bar title="面试日程" left-arrow fixed @click-left="$router.back()" />
        <!-- 导航栏 end -->

        <!-- 筛选 start -->
        <van-sticky :offset-top="46">
          <van-dropdown-menu active-color='#1989fa'>
            <van-dropdown-item title="面试状态" :options="[{value:'',text:'全部'},{value:'1',text:'今日面试'}]" v-model="query.FaceStatue" @change="reloadData" />
            <van-dropdown-item title="评语状态" :options="[{value:'',text:'全部'},{value:'0',text:'未评'},{value:'1',text:'已评'}]" v-model="query.PyStatue" @change="reloadData" />
          </van-dropdown-menu>
        </van-sticky>
        <!-- 筛选 end -->

        <!-- 内容 start -->
        <MyEmpty v-if="rsList.length == 0" />
        <div class="my-invite" v-else>
          <van-list class="list" :loading="dataLoading" finished-text="没有更多了" :finished="finished" @load="loadData">
            <van-swipe-cell class="item" :class="{'finish':true}" v-for="(item,index) in rsList" :key="index">
              <div class="show">
                <p>
                  <b>{{item.personName}}</b>
                  <span @click="onPY(item)">
                    <van-icon name="bookmark" />评语
                  </span>
                </p>
                <p><span>{{item.stationName}}</span></p>
                <p><span>{{item.dateStr}}</span></p>
                <p><span>{{item.address}}</span></p>
              </div>
              <template #right>
                <van-button square text="删除" type="danger" style="height: 100%" />
              </template>
            </van-swipe-cell>
          </van-list>
        </div>
        <!-- 内容 end -->

        <!-- 评语 start -->
        <van-popup v-model="ppShowPY" class="my-invite-remark">
          <b>编辑评语</b>
          <p>
            <van-field v-model="postPY.content" rows="5" autosize show-word-limit type="textarea" :placeholder="postPY.personName+'的评语'" class="textarea" maxlength="200" />
          </p>
          <p>
            <van-button round type="primary" text="取消" class="btn" @click="ppShowPY=false"></van-button>
            <van-button round type="primary" text="保存" class="btn" @click="savePY"></van-button>
          </p>
        </van-popup>
        <!-- 评语 end -->
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import { NavBar, Sticky, DropdownMenu, DropdownItem, List, Icon, Button, SwipeCell, Field, Popup, Toast, } from "vant";
export default {
  name: "LivePlay",
  components: {
    [NavBar.name]: NavBar,
    [Sticky.name]: Sticky,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [List.name]: List,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [SwipeCell.name]: SwipeCell,
    [Field.name]: Field,
    [Popup.name]: Popup,
  },
  // 定义属性
  data() {
    return {
      //loading
      skeletonLoading: true,
      dataLoading: false,
      finished: false,
      ppShowPY: false,
      //request
      query: {
        pageIndex: 0,
        pageSize: 30,
        FaceStatue: '',
        PyStatue: ''
      },
      postPY: {
        content: '',
        personIDEncrypt: '',
        personName: '',
      },
      //response
      rsList: []
    };
  },
  mounted() {
    this.skeletonLoading = false;
    this.loadData();
  },
  // 方法集合
  methods: {
    loadData() {
      this.dataLoading = true;
      this.query.pageIndex++;
      this.$api.get('/CompanyMine/GetCompanyInvitePageList', this.query).then(res => {
        this.dataLoading = false;
        if (res.success) {
          var resultList = res.response;
          //no data
          if (this.query.pageIndex == 1 && resultList.length == 0) {
            //...
            this.finished = true;
          }
          else {
            //no more data
            if (this.query.pageIndex != 0 && res.response.length == 0) {
              this.finished = true;
            }
            else {
              this.rsList = [...this.rsList, ...resultList];
            }
          }
        }
        else { this.this.query.pageIndex-- }
      })
    },
    reloadData() {
      this.query.pageIndex = 0;
      this.finished = false;
      this.rsList = [];
      this.loadData();
    },
    onPY(item) {
      this.postPY.personIDEncrypt = item.personIDEncrypt;
      this.postPY.personName = item.personName;
      if (item.pyContent)
        this.postPY.content = item.pyContent;
      else { this.postPY.content = '' }
      this.ppShowPY = true;
    },
    savePY() {
      this.$api.post('/CompanyMine/SavePY', this.postPY).then(res => {
        Toast(res.msg);
        if (res.success) {
          this.ppShowPY = false;
        }
      })
    }
  },
};
</script>
<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>